<template>
  <div class="app">
    <!--导航栏-->
    <Header></Header>
    <div class="main_body">
      <div class="admin_body">
        <div class="admin_login_title">
          <div class="login_title">
            <img src="../../assets/csdnlogo.png" />
            <h1>管理端登录</h1>
          </div>
        </div>
        <div class="admin_login_form">
            <form class="login_form">
                <!--账号-->
                <div class="username">
                  账号：<el-input v-model="UserInfo.idCard" placeholder="请输入账号" style="width: 250px"></el-input>
                </div>
                <!--密码-->
                <div class="pwd">
                  密码：<el-input type="password" v-model="UserInfo.password" placeholder="请输入密码" style="width: 250px">
                  </el-input>
                </div>
                <!--登录按钮-->
                <div class="btn_login">
                  <el-button type="primary" style="width: 120px; " round @click="submitForm()">登录</el-button>
                  <el-button type="primary" style="width: 120px;" round @click="toClear()">重置</el-button>
                </div>
            </form>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from "../../components/Header";
  import Footer from "../../components/Footer";
  export default {
    name: "Login",
    data(){
      return{
        UserInfo:{},
      }
    },
    components:{
      Header,
      Footer
    },
    methods:{
      toClear(){
        this.UserInfo.idCard = '';
        this.UserInfo.password = ''
      },
      submitForm() {
        let _this = this
        this.$axios.post("http://localhost:8087/user/login", this.UserInfo).then(function(res) {
          if (res.data != -1) {
            _this.$message({
              message: '登陆成功~',
              type: 'success'
            });
            _this.$router.push({
              name: 'Admin',
              query: {
                id: res.data
              }
            })
            localStorage.setItem("id", res.data)
            token.type = 1
            console.log("登录：" + localStorage.getItem("id"))
          } else {
            _this.$message.error('可能是账户或密码错误，登录失败呢');
          }
        })
        this.resetForm()
      }
    }
  }
</script>

<style scoped>
  .main_body {
    width: 100%;
    min-height: 830px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../../assets/amdinbg.gif);
  }

  .admin_body {
    width: 600px;
    height: 450px;
    -webkit-box-shadow: #e3e3e3 0px 0px 10px;
    -moz-box-shadow: #e3e3e3 0px 0px 10px;
    box-shadow: #e3e3e3 0px 0px 10px;
    background-color: #FFFFFF;
  }

  .admin_login_title {
    height: 20%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login_title {
    display: flex;
  }

  .login_title img {
    display: block;
    margin-right: 10px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: calc((48px - 44px)/ 2);
  }

  .admin_login_form {
    height: 80%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login_form {
    height: 100%;
    width: 80%;
    display: flex;
    flex-direction:column;
    align-items: center;
  }
  .login_form div{
    margin-top: 20px;
  }
  .btn_login button{
    margin-top: 10px;
  }
</style>
